<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>蓝红对称星星图案</title>
    <style>
        /* 页面整体样式 */
        body {
            margin: 0;
            padding: 50px 0;
            font-family: "Courier New", Courier, monospace; /* 等宽字体，星星对齐更整齐 */
            display: flex;
            justify-content: center; /* 让星星容器水平居中 */
        }

        /* 星星容器：黄色背景，内边距保证星星周围有空间 */
        .star-box {
            background-color: yellow; /* 标准黄色背景，匹配效果图 */
            padding: 20px 80px; /* 上下20px，左右80px内边距 */
            border: 1px solid #ccc; /* 可选：加个浅边框，更贴近效果图的矩形感 */
        }

        /* 蓝色星星行样式 */
        .blue {
            color: blue;
            font-size: 24px; /* 星星大小，可根据需要调整 */
            line-height: 1.2; /* 行高，避免星星行间距过大 */
            text-align: center; /* 每行星星居中 */
            margin: 0; /* 清除默认边距 */
        }

        /* 红色星星行样式 */
        .red {
            color: red;
            font-size: 24px;
            line-height: 1.2;
            text-align: center;
            margin: 0; /* 清除默认边距 */
        }
    </style>
</head>
<body>
    <!-- 星星容器 -->
    <div class="star-box" id="starBox"></div>

    <script>
        // 获取星星容器DOM元素
        const starBox = document.getElementById('starBox');
        // 定义10行星星的数量：前5行递增1/3/5/7/9，后5行递减9/7/5/3/1
        const starNums = [1, 3, 5, 7, 9, 9, 7, 5, 3, 1];
        // 定义10行星星的颜色类名：前5行蓝色，后5行红色
        const colorClasses = ['blue', 'blue', 'blue', 'blue', 'blue', 'red', 'red', 'red', 'red', 'red'];

        // 循环生成每一行星星
        for (let i = 0; i < starNums.length; i++) {
            // 创建一个<p>标签作为星星行（也可用div，p标签更贴合文本行）
            const starRow = document.createElement('p');
            // 给当前行添加颜色类名
            starRow
.className = colorClasses[i];
            // 根据数量生成星星（用*号表示星星）
            starRow
.innerText = '*'.repeat(starNums[i]);
            // 将星星行添加到容器中
            starBox
.appendChild(starRow);
        }
    </script>
</body>
</html>